<script setup>
import Login from './logo/index.vue'
import MMenu from './menu/index.vue'
import maain from './main/index.vue'//右侧展示区
import Tabbar from './tabbar/index.vue'
import userLayOutSettingStore from "@/store/modules/setting.js"
let LayOutSettingStore = userLayOutSettingStore()
//获取用户相关的小仓库
import useUserStore from "../store/modules/user.js"
let userStore = useUserStore()
</script>

<template>
<div class="layout-container">
    <!-- 左侧菜单 -->
     <div class="layout_slider" :class="{fold: LayOutSettingStore.fold?true:false}">
        <Login></Login>
        <!-- 展示菜单 -->
        <el-scrollbar class="scrll" >
        <!-- 根据路由匹配菜单 -->
            <MMenu :menuList="userStore.menuRouter"></MMenu>
        </el-scrollbar>
     </div>
     <!-- 顶部导航栏 -->
     <div class="layout_tabbar">
        <Tabbar></Tabbar>
     </div>
     <!-- 内容区域 -->
     <div class="layout_main">
     <maain></maain>
    </div>
</div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.layout-container {
    height: 100vh;
    width: 100%;
}

.layout_slider {
    width: 260px;
    height: 100%;
    transition: all 1s ease-in;
    background-color: #001529;
}

.layout_tabbar {
    position: fixed;
    top: 0;
    left: 267px;
    width: calc(100% - 260px);
    height: 100px;
    background-color: #f5f7fa;
    transition: all 1s ease-in;
}

/* 当折叠时，更新顶部导航栏和主内容区域的位置 */
.fold + .layout_tabbar {
    width: calc(100vw - 70px);
    left: 60px;
}

/* 当侧边栏折叠时，更新主内容区域的位置和宽度 */
.fold + .layout_tabbar + .layout_main {
    width: calc(100vw - 70px);
    left: 60px;
}

.layout_main {
    padding: 20px 20px;
    position: fixed;
    top: 100px;
    left: 267px;
    width: calc(100% - 260px);
    height: calc(100% - 100px);
    background-color: #6d5353;
    overflow: auto;
    transition: all 1s ease-in;

    ::webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::webkit-scrollbar-track {
        background-color: #ff0000;
        border-radius: 50px;
    }
}

.scrll {
    width: 100%;
    height: calc(100vh-70px);
}
.layout_slider.fold {
    width: 50px;
}
</style>
